<!--
 * @Author: wangyu
 * @Date: 2024-12-26 13:58:02
 * @LastEditTime: 2024-12-27 13:45:46
 * @LastEditors: wangyu
 * @Description: 
 * @FilePath: \dzsq-smartpark-platform\src\views\assetsManager\components\progress.vue
-->
<template>
  <div class="pcontent ml8">
    <div class="pcontent-label" style="margin-right: 16px">
      {{ props.data.label }}
    </div>
    <div class="pcontent-list ml5">
      <span v-if="!props.type">
        <div
          v-for="item in number"
          :key="item"
          :style="{
            background: getBackground(item, props.data.value),
          }"
        ></div>
      </span>
      <el-progress
        v-else
        text-color="#ffffff"
        :percentage="props.data.value"
        color="linear-gradient(90deg, rgba(136, 250, 200, 1) 0%, rgba(136, 250, 200, 1) 0%, rgba(102, 186, 248, 1) 100%, rgba(102, 186, 248, 1) 100%)"
        :stroke-width="16"
        :format="props.data.format || '%'"
      ></el-progress>
    </div>
    <div
      v-if="!props.type"
      style="width: 60px; margin: 0 24px 0 0; text-align: right"
    >
      {{ props.data.value }}%
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from "vue";

const props = defineProps({
  data: Object,
  type: String,
});
const colors = [
  { r: 3, g: 145, b: 255 },
  { r: 255, g: 166, b: 6 },
];
const number = ref(0);

onMounted(() => {
  nextTick(() => {
    const d = document.getElementsByClassName("pcontent-list")[0];
    number.value = Math.floor(d.clientWidth / 10);
  });
});

const getBackground = (num, value) => {
  const getColor = () => {
    return colors[0];
  };
  const color = getColor();
  // 判断第几个返回默认样式
  if (num / number.value > value / 100) {
    return "#18273C";
  } else {
    return `linear-gradient(90deg,rgba(${color.r}, ${color.g}, ${color.b}, ${
      num / number.value
    }) 1%,rgba(${color.r}, ${color.g}, ${color.b}, ${
      (num + 1) / number.value
    }) 100%)`;
  }
};
</script>
<style scoped lang="scss">
::v-deep {
  .el-progress__text {
    color: #ffffff;
    margin-left: 16px;
  }
}
.pcontent {
  display: flex;
  line-height: 36px;
  align-items: center;
  &-label {
    width: 100px;
  }
  &-list {
    flex: 1;
    > span {
      display: flex;
      height: 16px;
      align-items: center;
      > div {
        width: 8px;
        height: 13px;
        margin-right: 2px;
        border-radius: 2px;
        cursor: pointer;
      }
    }
  }
}
</style>
